<template>
	<view class="content">
		<z-paging ref="paging" v-model="formList" @query="get_form_list" :default-page-size="10">
			<template slot="top">
				<view class="bartop"></view>
				<view class="cu-bar">
					<view class="action">
						<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
					</view>
					<view class="text-lg text-bold">
						半成品支领
					</view>
					<view class="action">
						<text class="text-lg" style="color: #13227a;" @tap="createForm">新建</text>
					</view>
				</view>
			</template>

			<view v-if="formList.length>0" class="cu-list menu">
				<view v-for="(item,index) in formList" :key="index" @click="showDetail(item)" class="cu-item"
					:style="index%2==0?'background:#fff':'background:#dedede' ">
					<view class="item margin-top-sm">
						<text>支领单编号：{{item.zlnumber}}</text>
						<text>备货状态：{{item.hstate}}</text>
					</view>
					<view class="item margin-bottom-sm">
						<text>领料人：{{item.name}} </text>
						<text>领料状态：{{item.lstate}}</text>
						<text>组装状态：{{item.zstate}}</text>
					</view>
				</view>
			</view>
		</z-paging>
		<view class="cu-modal" :class="modalName=='Edit'? 'show' : ''" style="z-index: 99;">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">新建支领单</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl border">
					<input placeholder="请输入支领单编号" type="" v-model="zlnumber">
				</view>
				<view class="cu-form-group">
					<view class="title">支领人</view>
					<picker v-if="operator.types" @change="OperatorChange" :name="operator.key"
						:value="operator.newindex" :range="operator.types" range-key="trueName">
						<view v-if="operator.newindex == -1" class="picker">
							请选择支领人
						</view>
						<view v-else class="picker">
							{{ operator.types[operator.newindex].trueName }}
						</view>
					</picker>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="hideModal">取消</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null, // id
				zlnumber: null,
				modalName: null,
				operator: {
					newindex: -1,
					key: 'operator',
					types: []
				},
				formList: []
			}
		},
		methods: {

			onShow() {
				this.$refs.paging.reload()
			},
			onLoad(options) {
				this.getOperator()

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			get_form_list(pageNo, pageSize) {
				this.$Request.getPHP(this.$httpApi.claim.list + "?page=" + pageNo + "&listRows=" + pageSize).then(
					res => {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						} else {
							console.log(res)
							try {
								uni.hideLoading()
								this.$refs.paging.complete(res.data.data)
							} catch (e) {
								this.$refs.paging.complete([])
								uni.hideLoading()
							}
						}
					})
			},

			showDetail(item) {
				uni.navigateTo({
					url: '/pages/assemble_director/claim_detail/claim_detail?id=' + item.id
				})
			},

			createForm() {
				this.modalName = "Edit"
			},
			hideModal(e) {
				this.modalName = null
			},
			confirmModal(e) {

				if (this.zlnumber == null) {
					uni.showToast({
						title: "请填写支领单编号",
						icon: 'none',
						duration: 2000
					});
					return
				}
				let url = this.$httpApi.claim.add + "?zlNumber=" + this.zlnumber
				let userid = 0
				if (this.operator.newindex != -1) {
					userid = this.operator.types[this.operator.newindex].userId
					url = url + "&userId=" + userid
				}
				// this.hideModal()
				this.$Request.postPHP(url).then(res => {
					this.hideModal()
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: 'none',
							duration: 2000
						});
						this.$refs.paging.reload()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})

			},
			getOperator() {
				this.$Request.get(this.$httpApi.operator.findAssembleDirector).then(res => {
					if (res.code == 200) {
						this.operator.types = res.data
					}
				})
			},
			OperatorChange(e) {
				this.operator.newindex = e.detail.value
				console.log(this.operator.newindex)

			},
		}
	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
